<template>
	<NavBar :obj="{ title: '我的收藏', color: '#000', backgroundColor: '#fff' }" />

	<up-sticky :offset-top="offsetTop">
		<view class="top flex items-center justify-between">
			<view class="tabs">
				<up-tabs
					:list="condition"
					@click="conditionCah"
					:scrollable="false"
					:activeStyle="{
						color: '#303133',
						fontSize: '34rpx',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						fontWeight: 400,
						fontSize: '28rpx',
						color: '#666666'
					}"
					lineColor="linear-gradient(90deg, #FB3204 0%, #FE7800 100%)"
				></up-tabs>
			</view>
			<view class="clear" @click="manage = true" v-if="!manage">管理</view>
			<view class="clear" @click="manage = false" v-else>完成</view>
		</view>
	</up-sticky>

	<view class="fill">
		<view class="show-load" v-if="showLoad" style="padding: 30rpx">
			<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
		</view>

		<view class="empty" style="padding-bottom: 20%" v-if="!list.length && !showLoad">
			<up-empty icon="/static/product/ic_zerodata@2x.png" iconSize="392rpx" marginTop="50%" text="暂无收藏" />
		</view>
		<view class="product" v-if="type == 1">
			<view
				class="item flex items-center"
				v-for="(item, index) in list"
				:key="index"
				v-if="list.length > 0"
				@click="!manage ? goUrl('/pages/product/details?id=' + item.id) : ''"
			>
				<image :src="changeIcon[item.change]" class="checkbox-icon" @click="change(index)" v-if="manage"></image>
				<view class="info flex flex-1">
					<image :src="imgUrl + item.icon" class="icon"></image>
					<view class="tls flex flex-col justify-between flex-1">
						<view class="fast">
							<view class="title line-1-clamp">{{ item.title }}</view>
						</view>
						<view class="last flex items-center justify-between">
							<view class="price rmb">{{ item.vip_price }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<up-row gutter="10rpx" class="video-list" v-else>
			<up-col span="6" v-for="(item, index) in list" :key="index">
				<view class="video-item">
					<view class="fm-box" @click="goUrl('/pages/user/video/video-info?id=' + item.id)">
						<image :src="item.video + '?vframe/jpg/offset/1'" class="fm"></image>
						<image src="/static/product/ic_cepbofbig.png" class="dsj-icon"></image>
					</view>

					<view class="abs flex items-center justify-between">
						<view class="left flex items-center justify-center">
							<image src="/static/video/ic_dspscangwei@2x.png" class="icon"></image>
							<text>{{ item.collects }}</text>
						</view>
					</view>
					<view class="pos-icon flex justify-end" v-if="manage" @click="change(index)">
						<image :src="changeIcon[item.change]"></image>
					</view>
				</view>
			</up-col>
		</up-row>
	</view>

	<view class="footer flex items-center justify-between" v-if="manage">
		<view class="all flex items-center" @click="allChecked">
			<image :src="changeIcon[changeAll]" class="all-icon"></image>
			<text>全选</text>
		</view>
		<view class="total flex items-center">
			<view class="total-r delete" @click="clearFoot">取消收藏</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, inject } from 'vue';
	import { port, imgUrl, goUrl, loading, closeLoading, hint } from '/service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	const list = ref([]);
	const title = ref('');
	const type = ref(1);
	const listRef = ref({
		page: 1
	});
	const showLoad = ref(true);
	const changeIcon = ['/static/cart/ic_gwcweix@2x.png', '/static/cart/ic_gwcyixz.png'];
	const checkedIds = ref([]);
	const changeAll = ref(0);
	const condition = reactive([
		{ name: '商品', val: 1 }
		// { name: '视频', val: 2 }
	]);

	const manage = ref(false);

	function conditionCah(e) {
		type.value = e.val;
		listRef.value.page = 1;
		list.value.length = 0;
		myCollect();
	}
	const offsetTop = ref(0);
	onShow(() => {
		// #ifdef MP-WEIXIN
		offsetTop.value = inject('minTop');
		// #endif
		listRef.value.page = 1;
		list.value.length = 0;
		myCollect();
	});

	onReachBottom(() => {
		myCollect();
	});

	function change(index) {
		if (list.value[index].change == 1) {
			checkedIds.value.splice(checkedIds.value.indexOf(list.value[index].id), 1);
		} else {
			checkedIds.value.push(list.value[index].id);
		}
		list.value[index].change = list.value[index].change == 1 ? 0 : 1;
	}

	function allChecked() {
		let op = changeAll.value == 1 ? 0 : 1;
		changeAll.value = op;
		list.value = list.value.map((i) => {
			i.change = op;
			if (i.change == 1) {
				checkedIds.value.push(i.id);
			}
			return i;
		});
		if (op != 1) {
			checkedIds.value.length = 0;
		}
	}

	async function clearFoot() {
		if (!checkedIds.value.length) {
			hint('请选择要取消收藏的' + (type.value == 1 ? '商品' : '视频'));
			return false;
		}

		uni.showModal({
			title: '请确认',
			content: '确定要取消收藏吗？',
			confirmColor: '#FB3204',
			success: async function (res) {
				if (res.confirm) {
					loading();
					let res = await port(type.value == 1 ? 'collectProduct' : 'videoCollect', { status: 0, id: checkedIds.value.join(',') });

					setTimeout(() => {
						closeLoading();
						hint(res.msg);
						listRef.value.page = 1;
						list.value.length = 0;
						myCollect();
					}, 200);
				}
			}
		});
	}

	async function myCollect() {
		showLoad.value = true;
		let res = await port(type.value == 1 ? 'myProductCollect' : 'myVideoCollect', listRef.value);
		showLoad.value = false;
		if (res.data.length) {
			res.data.forEach((i) => {
				i.change = 0;
			});

			list.value = [...list.value, ...res.data];
			listRef.value.page++;
		}
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}

	::v-deep .u-tabs__wrapper__nav__item {
		padding: 0 44rpx;
	}

	.flex-show-load {
		position: sticky;
		bottom: 10rpx;
		width: 100%;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: calc(100% - 60rpx);
		background: #ffffff;
		box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
		padding: 13rpx 30rpx;
		z-index: 110;
		.all {
			.all-icon {
				width: 42rpx;
				height: 42rpx;
			}
			> text {
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				margin-left: 14rpx;
			}
		}
		.total {
			.total-l {
				margin-right: 20rpx;
				.total-v {
					.amount-text {
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
					}
					.rmb:before {
						font-size: 26rpx;
					}
					.amount {
						color: #fb3204;
						font-size: 32rpx;
					}
				}
				.checked {
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
				}
			}
			.total-r {
				font-weight: 500;
				font-size: 30rpx;
				color: #ffffff;
				background: linear-gradient(-90deg, #fb3204 0%, #fe7800 100%);
				border-radius: 36rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				padding: 0 50rpx;
			}
			.collect {
				font-weight: 500;
				height: 70rpx;
				line-height: 70rpx;
				color: #888888;
				background: #fff;
				border: 1rpx solid #cccccc;
			}

			.delete {
				font-weight: 500;
				height: 70rpx;
				line-height: 70rpx;
				color: #fb3204;
				background: #fff;
				border: 1rpx solid #fb3204;
				margin-left: 20rpx;
			}
		}
	}

	.top {
		background: #ffffff;
		padding: 0 30rpx 0 0;
		.clear {
			font-weight: 400;
			font-size: 28rpx;
			color: #fb3204;
			background: #ffe3dd;
			border-radius: 24rpx;
			padding: 5rpx 25rpx;
		}
	}

	.fill {
		padding-bottom: 100rpx;

		.product {
			.item {
				margin: 24rpx;
				background: #ffffff;
				border-radius: 30rpx;
				padding: 24rpx;
				.checkbox-icon {
					width: 42rpx;
					height: 42rpx;
					margin-right: 20rpx;
				}

				.info {
					.icon {
						width: 154rpx;
						height: 154rpx;
						border-radius: 10rpx;
					}
					.tls {
						margin-left: 22rpx;
						.fast {
							.title {
								font-weight: 400;
								font-size: 26rpx;
								color: #000000;
							}
							.spec {
								font-weight: 400;
								font-size: 22rpx;
								border-radius: 6rpx;
								margin-top: 15rpx;
								> text {
									color: #888888;
									background: #f6f6f6;
									padding: 5rpx 13rpx;
								}
							}
						}
						.last {
							.price {
								font-weight: 500;
								font-size: 36rpx;
								color: #fb3204;
							}
							.rmb:before {
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}

		.video-list {
			margin: 24rpx;
			flex-wrap: wrap;
			.video-item {
				margin-bottom: 14rpx;
				background: #ffffff;
				border-radius: 18rpx;
				height: 480rpx;
				position: relative;

				.pos-icon {
					position: absolute;
					top: 0;
					right: 0;
					width: 100%;
					height: 480rpx;
					z-index: 99;
					background-color: rgb(0, 0, 0, 0.1);
					> image {
						width: 42rpx;
						height: 42rpx;
						margin: 10rpx;
					}
				}

				.icon-sh {
					position: absolute;
					top: 0;
					left: 0;
					width: 100rpx;
					height: 100rpx;
				}

				.fm-box {
					width: 100%;
					height: 100%;
					position: relative;
					.fm {
						width: 100%;
						height: 100%;
						border-radius: 18rpx;
					}
					.dsj-icon {
						position: absolute;
						width: 70rpx;
						height: 70rpx;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
				.abs {
					position: absolute;
					left: 0;
					bottom: 0;
					padding: 13rpx;
					border-radius: 0 0 18rpx 18rpx;
					width: calc(100% - 26rpx);
					// background-color: rgb(0, 0, 0, 0.1);
					.left,
					.right {
						.icon {
							width: 28rpx;
							height: 26rpx;
						}
						> text {
							font-weight: 400;
							font-size: 24rpx;
							color: #ffffff;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
